<template>
	<view class="content">
		<view class="box_show">
			<view class="image-wrapper">
				<image :src="content.titleImg" mode="aspectFill"></image>
			</view>
			<view class="p10">
				<view class="title"><rich-text :nodes="content.title"></rich-text></view>
			</view>
		</view>	
		<view class="bor10 show">
			<view class="show_title">填写预约信息</view>
			<form @submit="formSubmit" report-submit="true">
				<view class="cu-form-group">
					<view class="title">选择日期</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="dateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">选择场次</view>
					<picker @change="pickerChange" :value="index1" :range="picker">
						<view class="picker">
							{{picker.length>0?picker[index1]: ''}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">选择数量</view>
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="picker">{{array[index].name}}</view>
					</picker>
				</view>	
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input :value="userInfo.phone || userInfo.authPhone" name="input" disabled="disabled"></input>
				</view>
				<view class="notes"><rich-text :nodes="rule"></rich-text></view>
				<view class="pt10"><button class="primary booking-btn"  formType="submit">同意条款并提交订单</button></view>
			</form>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default{
		components: {
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		data() {
			return {
				index: 0,
				index1: 0,
				id: 0,
				content: null,
				num: 1,
				slot: null,
				date: '',
				picker: [],
				array: [],
				startDate: '',
				endDate: '',
				rule:`
					<div style="width:100%">
					  <h3>预订须知</h3>
						1. 全年未入场票数达10张，将被取消当年预订资格；<br>
						2. 如需退票，请至“我的-我的活动“，退票截止至活动前一天（活动当天不可退票）；<br>
						3. 如因不可控因素导致活动无法进行，举办方有权延期或取消活动，并以短信方式通知订票人；<br>
						4. 如参加区图书馆、文化馆活动的市民，由于停车位有限，建议读者搭乘公共交通前往；<br>
						5. 活动最终解释权归举办方所有。
					</div>
				`,
			};
		},
		onLoad(options){
			this.id = options.id;
			this.loadData();
		},
		onShow(){
			if(!this.hasLogin){
				uni.showModal({
					title: "提示",
					content: "您还没有登录，现在登录吗？",
					showCancel: true,
					confirmText: "确定",
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({  
								url: '/pages/user/login'  
							})
						} else if (res.cancel) {
							uni.navigateBack();
						}
					}
				})
			}else if(!this.userInfo.isCertification){
				uni.showModal({
					title: "提示",
					content: "您还没有实名认证，现在去实名认证吗？",
					showCancel: true,
					confirmText: "确定",
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({  
								url: '/pages/user/user_authentication'  
							})
						} else if (res.cancel) {
							uni.navigateBack();
						}
					}
				})
			}
		},
		methods: {
			async loadData(){
				let r = await this.$api.get('/content/get.jspx',{
						format: 0,
						id: this.id
					})
				var content = r.data.body;
				this.content = content;
				this.startDate = content.ticketingSetting.startTime.substring(0, 10);
				this.date = this.startDate;
				this.endDate = content.ticketingSetting.endTime.substring(0, 10);
				var slots = content.ticketingSetting.slots;
				if(slots){
					let sa = slots.split(',');
					this.picker = sa;
					this.slot = this.picker[0];
				}
				var maxTicket = content.ticketingSetting.maxTicket;
				var arr = [];
				for(let i=0; i<maxTicket;i++){
					arr.push({name: i+1});
				}
				this.array = arr;
			},
			dateChange(e) {
				this.date = e.detail.value
			},
			pickerChange(e) {
				this.index1 = e.detail.value
				this.slot = this.picker[this.index1];
			},
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index = e.target.value
				this.num = this.index+1;
			},
			formSubmit(e){
				let formId = e.detail.formId;
				if(uni.requestSubscribeMessage){
					uni.requestSubscribeMessage({
						tmplIds: ['zmCcs1Ujh3f2iJTUjz6-cz6iUwVS9xPY7xFkntTXxso','hyq9onLLfSKfV44kGYPp9old_qXY_79ba0tmP0aEQv4'],
						success (res) { }
					});
				}
				this.$api.memberPost('/ticket/add',{
					contentId: this.id,
					phone: this.userInfo.phone,
					bookingDate: this.date,
					slot: this.slot,
					num: this.num,
					formId: formId
				},{'Content-Type': 'application/x-www-form-urlencoded'}).then(r=>{
					if(r.data.code == 200){
						uni.showModal({
							title: "预约成功",
							content: "预约成功，如需取消请至(我的-我的活动)",
							showCancel: false,
							confirmText: "确定"
						})
					}else{
						uni.showModal({
							title: "预约失败",
							content: r.data.message,
							showCancel: false,
							confirmText: "确定"
						})
					}
				});
			},
		}
		
	}
</script>
<style>

.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}
	
	.cu-form-group+.cu-form-group {
		border-top: 1upx solid #eee;
	}
	
	.cu-form-group .title {
		text-align: justify;
		padding-right: 30upx;
		font-size: 30upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
	}
	
	.cu-form-group input {
		flex: 1;
		font-size: 30upx;
		color: #555;
		padding-right: 20upx;
	}
	
	.cu-form-group>text[class*="cuIcon-"] {
		font-size: 36upx;
		padding: 0;
		box-sizing: border-box;
	}
	
	.cu-form-group textarea {
		margin: 32upx 0 30upx;
		height: 4.6em;
		width: 100%;
		line-height: 1.2em;
		flex: 1;
		font-size: 28upx;
		padding: 0;
	}
	
	.cu-form-group.align-start .title {
		height: 1em;
		margin-top: 32upx;
		line-height: 1em;
	}
	
	.cu-form-group picker {
		flex: 1;
		padding-right: 40upx;
		overflow: hidden;
		position: relative;
	}
	
	.cu-form-group picker .picker {
		line-height: 100upx;
		font-size: 28upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: left;
	}
	
	.cu-form-group picker::after {
		font-family: iconfont;
		display: block;
		content: "\e601";
		position: absolute;
		font-size: 26upx;
		color: #8799a3;
		line-height: 100upx;
		width: 60upx;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -10upx;
		margin: auto;
	}
	
	.cu-form-group textarea[disabled],
	.cu-form-group textarea[disabled] .placeholder {
		color: transparent;
	}
</style>
